<!--aaa页面 父组件-->
<template>
  <div class="tabZujian">
    <el-tabs v-model="activeName" type="border-card" class="herader-tabs">
      <el-tab-pane label="收银台" name="first" :key="'first'" class="herader-pane">
        <child1 v-if="isChildUpdate1 = 'child1'"></child1>
      </el-tab-pane>
      <el-tab-pane label="缴费情况" name="second2" :key="'second2'" class="herader-pane">
        <child2 v-if="isChildUpdate1 = 'child2'"></child2>
      </el-tab-pane>

      <el-tab-pane label="交易记录" name="second3" :key="'second3'" class="herader-pane">
        <child3 v-if="isChildUpdate1 = 'child3'"></child3>
      </el-tab-pane>

      <el-tab-pane label="费用设置" name="second4" :key="'second4'" class="herader-pane">
        <child4 v-if="isChildUpdate1 = 'child4'"></child4>
      </el-tab-pane>

      <el-tab-pane label="收款商绑定" name="second5" :key="'second5'" class="herader-pane">
        <child5 v-if="isChildUpdate1 = 'child5'"></child5>
      </el-tab-pane>

      <el-tab-pane label="优惠配置" name="second6" :key="'second6'" class="herader-pane">
        <child6 v-if="isChildUpdate1 = 'child=6'"></child6>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>
<script>
import ZongLanProcess from './shouyintai'
import ytProcess2 from './jiaofei'
import ytProcess3 from './jiaoyi'
import ytProcess4 from './feiyong'
import ytProcess5 from './shanghu'
import ytProcess6 from './youhui'
export default {
  name: 'tabZujian',
  components: {
    child1: ZongLanProcess,
    child2: ytProcess2,
    child3: ytProcess3,
    child4: ytProcess4,
    child5: ytProcess5,
    child6: ytProcess6,
  },
  data() {
    return {
      // 默认第一个选项卡
      activeName: 'first',
      // 初始化两个变量 isChildUpdate1:true，isChildUpdate2:false；
      // 使用v-if控制child1和child2是否渲染。
      // 每次切换tab选项的时候，触发事件。让当前点击的tab变量设置位true，让当前组件重新渲染。
      // 这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件
      isChildUpdate1: "child1",
    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>
<style scoped>
.herader-pane {
  margin-left: -35px;
  width: 110%;
  margin-bottom: -14px;
  margin-top: 15px;
  height: 1200px;
  padding-top: 10px;
  /* padding-bottom: 10px; */
  padding-left: 50px;
  box-shadow: 0 4px 6px rgba(61, 61, 61, 0.1), 0 -4px 6px rgba(61, 61, 61, 0.1),
    -4px 0 6px rgba(61, 61, 61, 0.1), 2px 0 6px rgba(61, 61, 61, 0.1);
}

.herader-tabs {
  margin-top: 15px;
  margin-left: 15px;
  padding-top: 10px;
  height: 1200px;
  box-shadow: 0 4px 6px rgba(61, 61, 61, 0.1), 0 -4px 6px rgba(61, 61, 61, 0.1),
    -4px 0 6px rgba(61, 61, 61, 0.1), 2px 0 6px rgba(61, 61, 61, 0.1);
}

element.style {
  /* padding: 0 10px; */
  padding-top: 25px;
  /* padding-left: -49px; */
}
</style>
